<script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { filterSend } from "@/api/category";
const route = useRoute();
const router = useRouter();

const filterData = ref("");

const filter = async () => {
  const data = await filterSend({ id: route.params.id });
  console.log(data);
  filterData.value = data.result;
};
filter();

watch(route, (newRoute,oldRoute)=>{
 if(newRoute.matched[0].path == '/filter/:id')filter()
  
})
</script>

<template>
  <div class="filter">
    <div class="filter-content-center">
      <div class="filter-nav">
        <div class="filter-nav-item">
          <p>分类：</p>
          <span>全部</span>
          <span v-for="item in filterData.categories" :key="item.id">
            {{ item.name }}
          </span>
        </div>
        <div class="filter-nav-item">
          <p>品牌：</p>
          <span>全部</span>
          <span v-for="item in filterData.brands" :key="item.id">
            {{ item.name }}
          </span>
        </div>
        <div
          class="filter-nav-item"
          v-for="item in filterData.saleProperties"
          :key="item.id"
        >
          <p>{{ item.name }}：</p>
          <span>全部</span>
          <span v-for="tag in item.properties" :key="tag.id">
            {{ tag.name }}
          </span>
        </div>
      </div>

      <div class="filter-content-goods">
        <div></div>
        <div class="filter-goods-box">
          <good-box
            v-for="item in filterData.goods"
            :key="item.id"
            class="home-goods-item"
          >
            <img :src="item.picture" alt="" />
            <div class="fresh-goods-text home-goods-text">
              <div class="home-goods-text-title">{{ item.name }}</div>
              <p style="color: #aaa">{{ item.desc }}</p>
              <p style="color: #e36844">{{ "¥" + item.price }}</p>
            </div>
          </good-box>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.filter {
  .filter-content-center {
    width: 80%;
    margin: 0 auto;
    .filter-nav {
      background-color: #fff;
      border: 1px solid #ddd;
      margin: 20px 0;
      padding: 20px 50px;

      .filter-nav-item {
        display: flex;
        flex-wrap: wrap;
        & ~ .filter-nav-item {
          border-top: 1px solid #eee;
        }
        padding: 10px 0;

        p{
          margin: 5px 0;
        }

        span {
          margin: 5px 10px;
          line-height: 20px;
          // border: 1px solid #eee;
        }
      }
    }
    .filter-content-goods {
      background-color: #fff;
      margin: 20px 0;
      padding: 20px 50px;
      .filter-goods-box {
        display: grid;
        grid-template-columns: repeat(4, calc((100% - (50px * 3)) / 4));
        gap: 50px;
        padding: 20px 0;
        .home-goods-item {
          // display: inline-block;
          img {
            width: 100%;
          }

          transition: all 0.5s;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1),
            0 6px 20px 0 rgba(0, 0, 0, 0.1);
          &:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
              0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transform: scale(1.05, 1.05);
          }

          .home-goods-text {
            width: 100%;
            text-align: center;
            background-color: #f0f9f4;
            .home-goods-text-title {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #333;
              font-size: 16px;
              padding: 5px 20px;
            }
            p {
              padding: 5px 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
